<template>
	<div class="theContent">
		<contentTitle title="绿色基地和三品展示"><btnList :data="buttonList" :cur.sync="typeId" @onClick="onClickButton"></btnList></contentTitle>
		<contentBox>
			<div class="tableContent">
				<div class="rowHeader">
					<div class="header_col1 label">主体名称</div>
					<div class="header_col2 label">产品名称</div>
					<div class="header_col3 label">面积(亩)</div>
					<div class="header_col4 label">产量(吨)</div>
				</div>
				<div id="divBody" class="rowBody" v-infinite-scroll="onLoadMore" :infinite-scroll-immediate="true" :infinite-scroll-distance="0">
					<div class="rowWrap" v-for="(item, i) in dataListByType" :key="i">
						<div class="rowContent">
							<div class="table_col1 label">{{ item.subjectName }}</div>
							<div class="table_col2 label">{{ item.productName }}</div>
							<div class="table_col3 label">{{ item.acreage }}</div>
							<div class="table_col4 label">{{ item.count }}</div>
						</div>
						<div class="line"></div>
					</div>
				</div>
			</div>
		</contentBox>
	</div>
</template>

<script>
import contentBox from '@/components/contentBox.vue';
import contentTitle from '@/components/contentTitle.vue';
import btnList from '@/components/btnList.vue';
import { listCertified } from '@/api/home.js';
export default {
	components: {
		contentBox,
		contentTitle,
		btnList
	},
	data() {
		return {
			buttonList: [{ value: 1, label: '绿色基地' }, { value: 2, label: '绿色食品' }, { value: 3, label: '有机食品' }, { value: 4, label: '无公害农产品' }],
			elBody: null, //DOM对象
			timerId: null, //定时器，用户滚动内容

			typeId: 2, //1 绿色基地  2-绿色食品 3-有机食品 4-无公害农产品

			dataList: [
				{
					typeId: 1,
					subjectName: '', //主体名称
					productName: '', //产品名称
					acreage: 0.0, //种植面积(亩)
					count: 0.0 //产量(公斤)
				}
			],
			loading: true //
		};
	},
	computed: {
		dataListByType() {
			return this.dataList.filter(item => item.typeId == this.typeId);
		}
	},
	created() {
		this.dataList = []; //数据清空
	},

	mounted() {
		this.elBody = document.getElementById('divBody');
		this.loadData(); //
	},
	beforeDestroy() {
		if (this.timerId) {
			clearTimeout(this.timerId);
		}
	},

	methods: {
		loadData() {
			this.loading = true;
			listCertified().then(result => {
				console.log('listCertified Result = ', result);

				this.dataList = result.data;
				this.elBody.scrollTop = 0; //滚动从新开始
				//启动定时器 从头开始滚动行数据
				if (this.timerId) {
					clearTimeout(this.timerId);
				}
				this.timerId = setInterval(() => {
					this.elBody.scrollTop = this.elBody.scrollTop + 2; //stepLength 5 \ 2
					if (this.elBody.scrollTop + this.elBody.clientHeight >= this.elBody.scrollHeight) {
						this.elBody.scrollTop = 0;
					}
					// console.log(this.elBody.scrollTop,this.elBody.scrollHeight,this.elBody.clientHeight)
				}, 100); //1000 \ 200

				this.loading = false;
			});
		},

		onLoadMore() {
			//this.elBody.scrollTop = 0 //滚动从新开始
			console.log('onLoadMore: typeId = ', this.typeId);
			//this.loadData()
		},

		onClickButton() {}
	}
};
</script>
<style lang="scss" scoped>
$witdhCol1: 45%;
$witdhCol2: 25%;
$witdhCol3: 15%;
$witdhCol4: 15%;

.theContent {
	// box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;

	.tableContent {
		width: 95%;
		height: 95%;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;

		.label {
			font-size: 24px;
			line-height: 34px;
			color: #e0e0e0;
		}
		.rowHeader {
			width: 100%;
			height: 5%;
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: rgba(0, 64, 0, 0.1);

			.header_col1 {
				width: $witdhCol1;
				text-align: left;
			}
			.header_col2 {
				width: $witdhCol2;
				text-align: left;
			}
			.header_col3 {
				width: $witdhCol3;
				text-align: right;
			}
			.header_col4 {
				width: $witdhCol4;
				text-align: right;
			}
		}

		.rowBody {
			padding: 10px 0;
			width: 100%;
			height: 600px; //需要调试的=================
			overflow-y: auto;
			overflow-x: hidden;
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE10+ */
			&::-webkit-scrollbar {
				display: none; /* ChromeSafari */
			}
		}
		.rowWrap {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.rowContent {
				width: 100%;
				padding: 20px 0px; //调节高度 <==========
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.table_col1 {
				width: $witdhCol1;
				text-align: left;
			}
			.table_col2 {
				width: $witdhCol2;
				text-align: left;
			}
			.table_col3 {
				width: $witdhCol3;
				text-align: right;
			}
			.table_col4 {
				width: $witdhCol4;
				text-align: right;
			}

			.line {
				width: 100%;
				height: 0px;
				border: 1px solid #707070;
			}
		}
	}
}
</style>
